<template>
  <div>
    <h2 style="text-align: center" >基本信息<i class="el-icon-info"></i></h2>
    <el-divider content-position="center">Basic information</el-divider>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card style="color:#409EFF" @click.native="toStaff">
          <div><i class="el-icon-user-solid"></i>人员总数：</div>
          <div class="text">{{ indexData.personNum }} 人</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color:#67C23A" @click.native="toMessage">
          <div><i class="el-icon-message-solid"></i>留言数量：</div>
          <div class="text">{{ indexData.message }} 条</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color:#E6A23C" @click.native="toTransport">
          <div><i class="el-icon-truck"></i>总运输任务：</div>
          <div class="text">{{ indexData.transNum }} 个</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color:#F56C6C" @click.native="toGoods">
          <div><i class="el-icon-money"></i>库存货物总价值：</div>
          <div class="text">{{ indexData.goodsValue }} 元</div>
        </el-card>
      </el-col>
    </el-row>
    <h2 style="margin:20px auto;text-align: center" >待确认的事项<i class="el-icon-notebook-2"></i></h2>
    <el-divider content-position="center">To be confirmed</el-divider>
    <el-row :gutter="20" style="margin-top: 30px">
      <el-col :span="6">
        <el-card style="color:#409EFF" @click.native="toOfficeMaterialPurchase">
          <div><i class="el-icon-tickets"></i>待确认的办公耗材采购单：</div>
          <div class="text">{{ indexData.orderToDo }} 个</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color:#67C23A" @click.native="toMaterialPurchase">
          <div><i class="el-icon-goods"></i>待确认的物资采购单：</div>
          <div class="text">{{ indexData.materialPurchase }} 个</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color:#E6A23C" @click.native="toGoodsPurchase">
          <div><i class="el-icon-goods"></i>待确认的货物采购单：</div>
          <div class="text">{{ indexData.goodsPurchase }} 个</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color:#F56C6C" @click.native="toTransportTask">
          <div><i class="el-icon-truck"></i>待确认的运输任务：</div>
          <div class="text">{{ indexData.transOrderToDo }} 个</div>
        </el-card>
      </el-col>
    </el-row>

    <h2 style="margin:20px auto;text-align: center" >本日公司数据<i class="el-icon-s-data"></i></h2>
    <el-divider content-position="center">Company data for the day</el-divider>
    <el-row :gutter="20" style="margin-top: 30px">
      <el-col :span="6">
        <el-card style="color:#409EFF" @click.native="toOfficeMaterialUsage">
          <div><i class="el-icon-tickets"></i>今日办公耗材使用量：</div>
          <div class="text">{{ indexData.officeMaterialUsage }} 件</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color:#67C23A" @click.native="toGoodsUsage">
          <div><i class="el-icon-truck"></i>今日货物运出：</div>
          <div class="text">{{ indexData.transGoodsToday }} 件</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color:#E6A23C" @click.native="toMaterialUsage">
          <div><i class="el-icon-truck"></i>今日维修物资使用：</div>
          <div class="text">{{ indexData.materialUsageToday }} 件</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color:#F56C6C" @click.native="toGoodsUsage">
          <div><i class="el-icon-money"></i>今日营收额：</div>
          <div class="text">{{ indexData.salaryToday }} 元</div>
        </el-card>
      </el-col>
    </el-row>
<!--    <div id="main" style="height: 300px;width:300px "> </div>-->
  </div>
</template>

<script>
import request from "@/utils/request";
export default {

  name: "Home",
  data(){
    return{
      indexData:{}
    }
  },
  created() {
    this.load()
  },
  methods:{
    load(){
        request.get('indexDate').then(res=>{
          this.indexData=res.data
        })
    },
    toStaff(){
      this.$router.push("/staff")
    },
    toMessage(){
      this.$router.push("/msgmanger")
    },
    toTransport(){
      this.$router.push("/transportTask")
    },
    toGoods(){
      this.$router.push("/goods")
    },
    toOfficeMaterialPurchase(){
      this.$router.push("/officeMaterialPurchase")
    },
    toMaterialPurchase(){
      this.$router.push("/materialPurchase")
    },
    toGoodsPurchase(){
      this.$router.push("/goodslPurchase")
    },
    toTransportTask(){
      this.$router.push("/transportTask")
    },
    toOfficeMaterialUsage(){
      this.$router.push("/officeUsage")
    },
    toMaterialUsage(){
      this.$router.push("/materialUsage")
    },
    toGoodsUsage(){
      this.$router.push("/goodsUsage")
    },
  }
}
</script>

<style scoped>
.text {
  margin: 10px auto;
  text-align: center
}
.el-card {
  transition: all .5s;
  cursor: pointer;
}
.el-card:hover{
  margin-top: -5px;
}
</style>